<template>
	<view class="lottery_container">
		<view class="grid_wrap">
			<view class="top_content">
				<view class="num_content">
					累计送出大钻石<span>{{prize_count.big_count | number_format}}</span>颗 &nbsp;&nbsp;&nbsp;
					小钻石<span>{{prize_count.small_count | number_format}}</span>颗
				</view>
			</view>
			<view class="lottery_wrap">
				<ul class="lottery_grid">
					<li v-for="(item, index) in grid_info_arr" :class="{ active: current_index == index && index != 8 }"
						:key="index" @click="luck_draw" :data-index="index">
						<image v-if="index != 8" class="grid_img" mode='aspectFill' :src="item.logo" alt="">
							<text v-if="index == 8">
								点击
								抽奖
							</text>
							<text v-else>
								{{item.text}}
							</text>
					</li>
				</ul>
			</view>
			<view style="height: 1026rpx;"></view> <!-- 填坑 -->
			<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view class="line_s"><span class="line"></span><span class="line"></span></view>
				<view class="luck_bottom">
					<view class="shengyu">今日抽奖剩余次数<span class="ci">{{lottery_draw_param.number_of_draws}}</span>次</view>
				</view>
				<swiper v-if="prize_record.length>0" interval="5000" autoplay="true" circular="true" class="smoking">
					<swiper-item v-for="(ph, on) in prize_record" :key="on">{{ ph.username }}
						{{ toDate(ph.add_time) }}抢到一颗钻石</swiper-item>
				</swiper>

				<view class="task_rule" v-if="task_list.length>0">
					<view class="title">获得更多抽奖机会</view>
					<view class="task_item" v-for="(item,index) in task_list" :key="index">
						<view class="first"><span class="yuan"></span><span class="num">{{index+1}}</span></view>
						<view class="second">{{item.desc}}</view>
						<view class="three">({{item.finish_count}}/{{item.finish_num}})</view>
						<view class="four bg_gray" v-if="item.status>0">已完成</view>
						<button class="four" open-type="share" style="padding: 0rpx;"
							v-else-if="item.type=='invite' && item.finish_count<item.finish_num">去完成</button>
						<view class="four" v-else-if="item.finish_count<item.finish_num" @click="nav_event(item)">去完成</view>
						<view class="four finish_color" v-else-if="item.finish_count>=item.finish_num"
							@click="finish_task(item,index)">完成</view>
					</view>
				</view>

				<!-- 今日中奖 -->
				<view class="record">
					<view class="record-header"></view>
					<view class="record-list">
						<view class="list-title">中奖记录</view>
						<view class="record-item" v-for="(item, i) in !unfold ? prize_record.slice(0,6) : prize_record" :key="i">
							<view class="record-content">
								<view class="head-img">
									<image :src="item.headnative" mode="aspectFill"></image>
								</view>
								<view class="record-name uni-ellipsis">{{item.username}}</view>
								<view class="record-txt">{{item.prize_desc}}</view>
							</view>
							<view class="record-time">{{toDate(item.add_time)}}</view>
						</view>
						<view class="unfold" @click="setUnfold">
							<view class="unfold-txt">{{unfold?'收起':'展开更多'}}</view>
							<!-- <image v-if="unfold == false" src="../../static/img/Full_Botton_icom@2x.png" mode="aspectFill"></image> -->
						</view>
					</view>
				</view>

				<view class="act_rule" v-if="JSON.stringify(act_rule)!='{}'">
					<view class="heard"><span class="line"></span><span class="title">{{act_rule.name}}</span><span
							class="line"></span></view>
					<view v-html="act_rule.title" class="desc"></view>
				</view>
				<image src="https://api.renxingniao.com/static/img/footer_icon2.png"
					style="width: 750rpx;height: 78rpx;padding-top: 50rpx;" mode="aspectFill"></image>
			</view>
			<!-- 		<view class="lottery_wrap_border">
				<ul v-for="(item, index) in 4" :key="index">
					<li v-for="(item, index) in 12" :key="index"></li>
				</ul>
			</view> -->
		</view>
		<!-- 抽奖完成弹出的窗口 -->
		<!-- <view class="lottery_finish_wrap">
			
		</view> -->
	</view>

</template>

<script>
	import LotteryDraw from './SJ-LotteryDraw.js';
	const util = require('../../../common/util.js');
	export default {
		data() {
			return {
				current_index: -1,
				recordList: [],
				unfold: false,
				flag: false
			};
		},
		computed: {
			toDate() {
				return time => {
					if (time == undefined || time == '') {
						return '';
					}
					return util.dateUtils.format(time);
				};
			}
		},
		filters: {
			number_format(val) {
				return util.number_format(val, 0)
			}
		},
		mounted() {
			this.recordList = this.prize_record.slice(0, 6)
		},
		props: {
			grid_info_arr: {
				type: Array,
				default: function() {
					return []
				}
			},
			prize_record: {
				type: Array,
				default: function() {
					return []
				}
			},
			lottery_draw_param: {
				type: Object,
				default: function() {
					return {
						startIndex: 0, //开始抽奖位置，从0开始
						totalCount: 4, //一共要转的圈数
						winingIndex: 0, //中奖的位置，从0开始
						speed: 50, //抽奖动画的速度 [数字越大越慢,默认100]
						aroundCount: 0, //转动格子次数
						number_of_draws: 1, //抽奖次数
					}
				}
			},
			task_list: {
				type: Array,
				default: function() {
					return []
				}
			},
			act_rule: {
				type: Object,
				default: function() {
					return {}
				}
			},
			prize_count: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			setUnfold() {
				// if(this.unfold){
				// 	this.recordList = this.prize_record.slice(0,6)
				// }else{
				// 	this.recordList = this.prize_record
				// }
				this.unfold = !this.unfold
			},
			async finish_task(item, index) {
				if (!this.$common.auth()) return;
				item.index = index
				let info = await this.$api.post('prize/finish_task', { id: item.id })
				this.$emit('finish_task', item)
				// uni.hideLoading()
			},
			nav_event(item) {
				console.info(item)
				if (item.type == 'toArgument') {
					uni.switchTab({
						url: '/pages/tab/story'
					})
				} else if (item.type == 'share_goods' || item.type == 'pay_goods') {
					uni.switchTab({
						url: '/pages/tab/goods'
					})
				}
			},
			async luck_draw(event) {
				if (!this.$common.auth()) return;
				if (this.flag) {
					uni.showToast({
						title: '正在抽奖中，请勿重复点击',
						icon: 'none'
					})
				}
				this.flag = true
				let index = event.currentTarget.dataset.index;

				if (index == 8) {
					let that = this;
					if (that.lottery_draw_param.number_of_draws == 0) {
						uni.showToast({
							title: '抽奖次数已用完',
							icon: 'none'
						})
					} else if (that.lottery_draw_param.aroundCount != 0) {
						uni.showToast({
							title: '正在抽奖中，请勿重复点击',
							icon: 'none'
						})
					} else {
						let responce = await this.$api.post('prize/start_prize')
						this.lottery_draw_param.winingIndex = responce.wining
						let win = new LotteryDraw({
							domData: that.grid_info_arr,
							...that.lottery_draw_param
						}, function(index, count, aroundCount, number_of_draws) {
							that.current_index = index;
							that.lottery_draw_param.aroundCount = aroundCount;
							// that.lottery_draw_param.number_of_draws=number_of_draws
							if (that.lottery_draw_param.winingIndex == index && that.lottery_draw_param.totalCount == count) {

								that.$emit('luck_draw_finish', that.grid_info_arr[index])
								that.flag = false
								// console.log('抽到了')
								uni.showModal({
									title: '温馨提示',
									content: `${responce.msg}`,
									showCancel: false
								})
							}
						});

					}
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './SJ-LotteryDraw.css';

	.record {
		position: relative;
		margin-top: 40rpx;

		.record-header {
			width: 720rpx;
			height: 40rpx;
			background: #c02f2c;
			border-radius: 19rpx;
			margin-left: 15rpx;
		}

		.record-list {
			margin-left: 40rpx;
			margin-top: -20rpx;
			width: 670rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			overflow: hidden;
			background: #ffffff;
			border-radius: 0px 0px 32rpx 32rpx;

			.list-title {
				font-size: 48rpx;
				color: #8E262E;
				line-height: 44rpx;
				font-weight: 700;
				padding: 20rpx 0 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.record-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				padding-bottom: 20rpx;

				.record-content {
					display: flex;
					align-items: center;

					.head-img {
						width: 48rpx;
						height: 48rpx;
						border-radius: 48rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 48rpx;
						}
					}

					.record-name {
						width: 160rpx;
						margin-left: 16rpx;
						font-size: 26rpx;
						color: #333333;
						line-height: 36rpx;
					}

					.record-txt {
						margin-left: 60rpx;
						font-size: 26rpx;
						color: #fa6400;
						line-height: 36rpx;
					}
				}

				.record-time {
					font-size: 22rpx;
					color: #999999;
					line-height: 32rpx;
				}
			}

			.unfold {
				width: 162rpx;
				height: 48rpx;
				background: #f2f2f2;
				border-radius: 4rpx;
				margin: 20rpx auto 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;

				.unfold-txt {
					font-size: 26rpx;
					font-weight: 700;
					color: #aaaaaa;
					line-height: 36rpx;
					margin-right: 8rpx;
				}

				image {
					width: 18rpx;
					height: 10rpx;
				}
			}
		}
	}
</style>